<template>
	<uni-popup ref="popup" type="center">
		<view class="prize-wrapper">
			<view class="content-wrapper">
				<view class="title">
					{{prizePopupOptions.title}}
				</view>
				<view class="prize-img-wrapper" v-if="prizePopupOptions.image">
					<image :src="prizePopupOptions.image" class="prize-img" />
				</view>
				<view class="description">
					{{prizePopupOptions.desc}}
				</view>
			</view>
			<view class="close-button" @click="clickPopupBtn">
				{{prizePopupOptions.btnText}}
			</view>
		</view>
	</uni-popup>
</template>




<script setup lang="ts">
	import { type } from "os";
	import { Ref, ref, defineExpose, defineEmits, onMounted, reactive } from "vue";
	import type { IPrizePopupOptions } from './types';
	import { BTN_TEXT } from './types';



	let prizePopupOptions : IPrizePopupOptions = reactive({
		title: '很遗憾，您未中奖',
		desc: '谢谢参与，您还有2次抽奖机会',
		btnText: BTN_TEXT.LOSEPRIZE
	});

	const popup : Ref<any> = ref(null);
	const emit = defineEmits(['click'])



	const open = (options : IPrizePopupOptions) : void => {
		prizePopupOptions = options;
		popup.value.open()
	}

	onMounted(() => {
		// open(prizePopupOptions)
	})

	const close = () : void => {
		popup.value.close();
	}

	const clickPopupBtn = () : void => {
		close();
		emit('click')
	}

	defineExpose({
		open,
		close,
	})
</script>

<style scoped lang="scss">
	@import "./prizePropup.scss";
</style>